<script  lang="ts">
import { defineComponent } from 'vue'
import { useUserStore } from '@/store/modules/user'
export default defineComponent({
setup () {
    const user = useUserStore()
    const changeColor = function(){
      let theme = user.theme == 'dark' ? 'white' : 'dark'
      user.changeTheme(theme)
    }
    return {
      changeColor,
      user
    }
  }
})
</script>
<template>
  
  <div class="header">
    <n-page-header subtitle="非常厉害" >
    <n-grid :cols="5">
      <n-gi>
        <n-statistic label="文章" value="125 集" />
      </n-gi>
      <n-gi>
        <n-statistic label="点赞" value="22 位" />
      </n-gi>
      <n-gi>
        <n-statistic label="收藏" value="36 次" />
      </n-gi>
      <n-gi>
        <n-statistic label="专栏" value="83 个" />
      </n-gi>
      <n-gi>
        <n-statistic label="关注数" value="2,346 个" />
      </n-gi>
    </n-grid>
    <template #title>
      <a
        href="https://juejin.cn/user/26836627369806"
        style="text-decoration: none; color: inherit"
      >一只大加号</a>
    </template>
    <template #header>
      <n-breadcrumb>
        <n-breadcrumb-item>主页</n-breadcrumb-item>
        <n-breadcrumb-item>精选</n-breadcrumb-item>
        <n-breadcrumb-item>超级精选</n-breadcrumb-item>
        <n-breadcrumb-item>个人主页</n-breadcrumb-item>
      </n-breadcrumb>
    </template>
    <template #avatar>
      <n-avatar
        src="https://p3-passport.byteimg.com/img/user-avatar/8ce8c44ca760551872de7d7417fc7d59~180x180.awebp"
      />
    </template>
    <template #extra>
      <n-space>
        <n-button @click="changeColor">切换颜色</n-button>
      </n-space>
    </template>
  </n-page-header>
  </div>
</template>

<style lang="scss" scoped>
.header{  
  // position: fixed;
  // top:0;
  // left: 0;
  // right: 0;
  // height: 200px;
  // background-color: rgb(24, 24, 28);

}
</style>
